<template>
    <nav class="header">
        <div class="layout-header-left">
            <button class="w-6 m-4" @click="RefreshPage()">
                <Refresh />
            </button>
        </div>
        <div class="layout-header-right m-3 text-[8px]">
            <el-popover placement="bottom-start" :width="230">
                <template #reference>
                    <el-avatar style="font-size: 11px">
                        {{ username }}
                    </el-avatar>
                </template>
                <div>
                    <el-button size="large" text @click="ChangePassword()"
                        >修改密码</el-button
                    >
                    <el-button size="large" text @click="Logout()"
                        >退出登录</el-button
                    >
                </div>
            </el-popover>
        </div>
    </nav>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Refresh } from '@element-plus/icons-vue'

import { localGet, localRemove } from '@/store/dataStore'
/**
 * 账号
 */
const username = localGet('username')

const state = reactive({
    visible: false
})

/**
 * 修改密码弹框
 */
const changePasswordDialog = ref()

/**
 * 修改密码
 */
const ChangePassword = () => {
    console.log('修改密码')
    changePasswordDialog.value.open()
}
/**
 * 退出登录
 */
const Logout = () => {
    /**
     * 删除token
     */
    localRemove('token')
    /**
     * 删除保存账号
     */
    localRemove('username')
    /**
     * 退出登录
     */
    window.location.href = '/login'
}
/**
 * 刷新页面
 */
function RefreshPage() {
    console.log('刷新页面')
}
</script>


<style >
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 64px;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    transition: all 0.2s ease-in-out;
    width: 100%;
    z-index: 11;
    background-color: white;
}
.layout-header-left,
.layout-header-right {
    display: flex;
    align-items: center;
}
</style>